<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-tree :data="companyList" node-key="id" ref="companyOrgTree" :expand-on-click-node="false" :default-expand-all="true" :highlight-current="true" :render-content="renderCompanyTree" :check-strictly="true" @check-change="handleCheckChange" @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="20">
        <el-card>
          <div>
            <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
              <el-form-item label="用户名称">
                <el-input v-model="form.tenantName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="getUserVoPage">
                  查询
                </el-button>
                <!-- <el-button type="primary" class="mb-15" icon="el-icon-refresh" size="middle" @click="onRefresh">
                      重置
                    </el-button> -->
                <el-button type="primary" class="mb-15" icon="el-icon-plus" size="middle" @click="changeDialogStatus(true)">
                  新增用户
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="tableData" border style="width: 100%;" height="calc(100vh - 220px)" row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="nickName" label="用户昵称" width="150">
            </el-table-column>
            <el-table-column prop="userLoginName" label="用户账号" width="150">
            </el-table-column>
            <el-table-column prop="postName" label="手机/邮箱">
              <template slot-scope="scope">
                <div>{{ scope.row.phoneNumber }}</div>
                <div>{{ scope.row.email }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="postName" label="职位" width="150">
              <template slot-scope="scope">
                <el-tag type="success" v-for="item in scope.row.postList" :key='item.id'>{{ item.postName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="getStatusTagType(scope.row)">{{ getUserStatus(scope.row) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastLoginTime" label="最后登录时间" width="160"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="editItem(scope.row)" type="text" size="small">编辑</el-button>
                <el-dropdown style="margin-left: 10px">
                  <span class="el-dropdown-link">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="deleteItem(scope.row)">删除</el-dropdown-item>
                    <el-dropdown-item @click.native="resetPwdItem(scope.row)">重置密码</el-dropdown-item>
                    <el-dropdown-item @click.native="allocRole(scope.row)">分配角色</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 25px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNum" :page-sizes="[10, 20, 50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
        </el-card>
        <user-info-comp :isShow="isShowDialog" :companyId="selectCompanyId" :item="userItem" @changeDialogStatus="changeDialogStatus" />
      </el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="isShowDelete" width="30%">
      <span>该操作将会删除该用户信息，确定是否进行删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDelete = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="isShowReset" width="30%">
      <span>该操作将会重置该用户密码为初始密码，确定是否进行重置？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowReset = false">取 消</el-button>
        <el-button type="primary" @click="confirmReset">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
    
<script>
import UserInfoComp from './components/userinfocomp.vue'
import { getCompanyTree } from "@/api/company";
import { getUserVoPage, deleteUser, resetUserPwd } from "@/api/user";
// import { getPostPage, deletePost } from "@/api/post";
export default {
  components: {
    UserInfoComp
  },
  data () {
    return {
      companyList: [],
      selectCompanyId: undefined,
      selectOrgItem: undefined,
      form: {
        postId: '',
        userName: '',
        loginName: ''
      },
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      isShowDialog: false,
      isShowDelete: false,
      userItem: undefined,
      isShowReset: false
    }
  },
  mounted () {
    this.getCompanyTree()
  },
  methods: {
    getCompanyTree () {
      getCompanyTree().then((res) => {
        if (res.status === 200) {
          this.companyList = res.data;
          if (this.companyList.length > 0) {
            this.selectOrgItem = this.companyList[0]
            const id = this.companyList[0].id
            this.selectCompanyId = id
            // this.selectOrgItem = null
            this.$refs.companyOrgTree.setCheckedKeys([id]);
            this.getUserVoPage()
          }
        } else {
          this.$message(res.message);
        }
      });
    },
    renderCompanyTree (h, { node, data, store }) {
      let fontSize = "14px"
      let textColor = 'black'
      if (node.checked) {
        textColor = 'blue'; // 选中时文字变为红色
      }
      let labelV = node.data.companyName === undefined ? node.data.orgName : node.data.companyName
      return h('span', [
        // h("i", {
        //   class: iconName, style: {
        //     fontSize: "14px"
        //   }
        // }),
        // h('span', '内层文本1'), h('span', '内层文本2'),
        h('span', {
          style: {
            fontSize: fontSize,
            color: textColor
          }
        }, labelV)
      ]);
    },
    handleCheckChange (data, checked, indeterminate) {
      if (checked && data.children && data.children.length > 0) {
        // 如果父节点被选中，手动取消子节点的选中状态
        data.children.forEach(child => {
          this.$refs.tree.setChecked(child.id, false);
        });
      }
    },
    handleNodeClick (data) {
      if (data.companyId !== undefined) {
        this.selectCompanyId = data.companyId
      } else {
        this.selectCompanyId = data.id
      }
      this.$refs.companyOrgTree.setCheckedKeys([data.id]);
      this.params.pageNo = 1
      this.selectOrgItem = data
      this.getUserVoPage()
    },
    getUserVoPage () {
      const selOrgId = this.selectOrgItem.orgName === undefined ? null : this.selectOrgItem.id
      const params = { ...this.params, ...this.form, companyId: this.selectCompanyId, orgId: selOrgId }
      getUserVoPage(params).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.records;
          this.total = res.data.total
        } else {
          this.$message(res.message);
        }
      });
    },
    handleSizeChange (row) {
      this.params.pageSize = row
      this.params.pageNo = 1
      this.getUserVoPage()
    },
    handleCurrentChange (row) {
      this.params.pageNo = row
      this.getUserVoPage()
    },
    changeDialogStatus (status) {
      if (status === "success") {
        this.isShowDialog = false
        this.getUserVoPage()
      } else {
        this.userItem = undefined
        this.isShowDialog = status
      }
    },
    getUserStatus (row) {
      switch (row.status) {
        case '1':
          return '正常';
        case '2':
          return '禁用';
        case '3':
          return '锁定';
        default:
          return '删除';
      }
    },
    getStatusTagType (row) {
      switch (row.status) {
        case '1':
          return 'success';
        case '2':
          return 'warning';
        case '3':
          return 'info';
        default:
          return 'danger';
      }
    },
    editItem (row) {
      this.userItem = row
      this.isShowDialog = true
    },
    resetPwdItem (row) {
      this.userItem = row
      this.isShowReset = true
    },
    deleteItem (row) {
      this.userItem = row
      this.isShowDelete = true
    },
    confirmDelete () {
      // const param = { id: this.postItem.id }
      const param = { ...this.userItem }
      deleteUser(param).then((res) => {
        this.isShowDelete = false
        this.getUserVoPage()
        if (res.status === 200) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败，请重试");
        }
      });
    },
    confirmReset () {
      const param = { ...this.userItem }
      resetUserPwd(param).then((res) => {
        this.isShowReset = false
        if (res.status === 200) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败，请重试");
        }
      });
    },
    allocRole (row) {
      const selOrgId = this.selectOrgItem.orgName === undefined ? "-1" : this.selectOrgItem.id
      this.$router.push(`/user/alloc/role?companyId=${this.selectCompanyId}&&orgId=${selOrgId}&userId=${row.id}&pageNo=${this.params.pageNo}&pageSize=${this.params.pageSize}`)
    }
  },


}
</script>
    
<style scoped>
::v-deep .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background-color: white !important;
  color: blue !important;
}
.el-dropdown-link {
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>